<template>
  <view  class="banner-container">
	<swiper :style="{marginTop:'50rpx', height: swiperConfig.swiperH, width:swiperConfig.swiperW}" 
      :indicator-dots="swiperConfig.indicatorDots" 
      :indicator-color="swiperConfig.indicatorColor" 
      :indicator-active-color="swiperConfig.indicatorActiveColor"
      :autoplay="swiperConfig.autoplay" 
      :interval="swiperConfig.interval" 
      :duration="swiperConfig.duration" 
      :circular="swiperConfig.circular"
      :previous-margin="swiperConfig.previousMargin"
      :next-margin="swiperConfig.nextMargin"
      @change="swiperChange" 
      @animationfinish="animationfinish">
      <swiper-item v-for="(item, i) in bannerList" :key="i">
		<!-- 1.当前展示为第1项时，bannerList最后一项和第二项的justifyContent值分别为flex-end和flex-start，其余项值为center -->
		<!-- 2.当前展示为最后一项时，bannerList倒数第2项和第1项的justifyContent值分别为flex-end和flex-start，其余项值为center -->
		<!-- 3.当前展示为其他项（非第1和最后1项）时，bannerList当前项的前1项和后1项的justifyContent值分别为flex-end和flex-start，其余项值为center -->
		<!-- 4.padding值也需要根据不同项设定不同值，但理同justifyContent -->
        <div class="image-container" 
			:class="[listLen == 1 ? 'item-center' : (listLen == 2 ? (curIndex == 0 ? ((i == 0) ? 'item-center' : 'item-right')  : ((i == 0) ? 'item-left' : 'item-center') ) : (curIndex===0?((i===listLen-1)?'item-left':(i===1?'item-right':'item-center')):(curIndex===listLen-1?(i===0?'item-right':(i===listLen-2?'item-left':'item-center')):(i===curIndex-1?'item-left':(i===curIndex+1?'item-right':'item-center')))))]">
          <image mode="heightFix"
		  show-menu-by-longpress="true" :src="item.filePreviewUrl" 
            class="slide-image" 
            :style="{
              transform: curIndex===i?'scale(' + scaleX + ',' + scaleY + ')':'scale(1,1)',
              transitionDuration: '.3s',
              transitionTimingFunction: 'ease',
            }" 
            />
        </div>
      </swiper-item>
    </swiper>
    <div class="desc-wrap" v-if=showBottomText>
      <div class="title">长按图片即可保存并分享</div>
      <image @click="closeView()" class="cancle" :src="cancleImg" mode="aspectFit"></image>
    </div>
  </view>
</template>
<script>
	import config from '@/config.js';
export default {
  props: {
	bannerList: {
		type: Array,
		default () {
			return []
		}
		
	},
	showBottomText:{
		type: Boolean,
		default:String
	},
	swiperConfig: {
		type: Object,
		default () {
			return {
				indicatorDots: true,
				indicatorColor: 'rgba(255, 255, 255, .4)',
				indicatorActiveColor: 'rgba(255, 255, 255, 1)',
				autoplay: false,
				interval: 3000,
				duration: 300,
				circular: true,
				previousMargin: '58rpx',
				nextMargin: '58rpx',
				slideImageW:'448rpx',
				slideImageH:'800rpx',
				swiperH:'900rpx',
				swiperW:'600rpx',
			}
		}
	},
	scaleX: {
		type: String,
		default: (634 / 550).toFixed(4)
	},
	scaleY: {
		type: String,
		default: (378 / 328).toFixed(4)
	}
  },
  computed:{
	listLen () {
		return this.bannerList.length
	}
  },
  data () {
    return {
      curIndex: 0,
      descIndex: 0,
      isDescAnimating: false,
	  cancleImg: config.staticImageUrl + 'mine/share_cancle.png',
    }
  },
  methods: {
	closeView(){
		this.$parent.$parent.closePop();
	},
    swiperChange (e) {
      const that = this
      this.curIndex = e.mp.detail.current
      this.isDescAnimating = true
      let timer = setTimeout(function () {
        that.descIndex = e.mp.detail.current
        clearTimeout(timer)
      }, 150)
    },
    animationfinish (e) {
      this.isDescAnimating = false
    },
    getBannerDetail (index) {
	  uni.showLoading({
		title: '将前往详情页面',
		duration: 2000,
		mask: true
	  })
    }
  }
}
</script>
<style lang="scss" scoped>
.banner-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
  .image-container {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	.slide-image {
	  z-index: 200;
	  height: 80%;
	  width: 0;
	}
  }
  .item-left {
	// justify-content: flex-start;
	justify-content: flex-end;
	padding: 56rpx 26rpx 0 0;
  }
  .item-right {
	justify-content: flex-start;
	// justify-content: flex-end;
	padding: 56rpx 0 0 26rpx;
  }
  .item-center {
	justify-content: center;
	padding: 56rpx 0 0 0;
  }
  .desc-wrap {
	  margin-top: 30rpx;
    box-sizing: border-box;
    width: 100%;
    height: 98rpx;
    display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
    .title {
      width: 100%;
      height: 42rpx;
      line-height: 42rpx;
      color: white;
      font-size: 30rpx;
      font-family: 'PingFangTC-Regular';
      font-weight: 600;
      display: flex;
	  justify-content: center;
	  align-items: center;
	  color: #D2D2D2;
    }
    .cancle {
	  margin-top: 10rpx;
      width: 42rpx;
	  height: 42rpx;
    }
  }
  @keyframes descAnimation {
    0% {
      opacity: 1;
    }
    25% {
      opacity: .5;
    }
    50% {
      opacity: 0;
    }
    75% {
      opacity: .5;
    }
    100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes descAnimation {
    0% {
      opacity: 1;
    }
    25% {
      opacity: .5;
    }
    50% {
      opacity: 0;
    }
    75% {
      opacity: .5;
    }
    100% {
      opacity: 1;
    }
  }
  .hideAndShowDesc {
    animation: descAnimation .3s ease 1;
    -webkit-animation: descAnimation .3s ease 1;
  }
}
</style>
